<template>
  <div class="con_play2">
    <div class="result play" v-if="cstatus === 0">
      <div class="btn_play" @click="lottery"></div>
    </div>
    <div class="result succ" v-else-if="cstatus === 1">
      <div class="btn_get" @click="haveCoupon"></div>
    </div>
    <div class="result repeat" v-else-if="cstatus === 2">
      <p><b>您已参与过抽奖</b></p>
    </div>
    <div class="result sorry" v-else-if="cstatus === 3"></div>
    <!-- 玩过没中 -->
    <div class="result repeat2" v-else-if="cstatus === 4">
      <p><b>您已参与过抽奖</b></p>
    </div>
    <!-- 抽中没领 -->
    <div class="result succ2" v-else-if="cstatus === 5">
      <p><b>您已参与过抽奖</b></p>
      <div class="btn_get" @click="haveCoupon"></div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  name: "LotteryB",
  props: ["cstatus"],
  data() {
    return {
      loading: {}, //加载中
    };
  },

  methods: {
    lottery() {
      this.loading = this.$toast.loading({
        message: "加载中...",
        duration: 0, // 无限时长loading
      });

      this.$http({
        method: "post",
        url: `${this.$CONF.baseUrl}lottery.jsp`,
        data: {
          type: 2,
        },
      })
        .then((res) => {
          // status   0:paly,1:succ,2:repeat,3:sorry; lottery()也是通过改变cstatus改变父组件fstatus
          let data = res.data;
          let status = -1; // 未授权登陆
          switch (data.code) {
            case -1:
              this.$router.replace("home");
              break;
            case 1:
              data.isAward === 1 ? (status = 1) : (status = 3);
              break;
            case -6:
              status = 2;
              break;
            case -8:
              status = 3;
              break;
            default:
              this.$toast(data.msg);
              break;
          }
          this.$emit("changeStatusB", status);
          this.loading.clear();
        })
        .catch((err) => {
          this.loading.clear();
          this.$toast("网络不佳，请稍后重试");
          this.$router.replace("home");
        });
    },
    haveCoupon() {
      this.$emit("getCounpon");
    },
  },
};
</script>

<style lang="scss">
.con_play2 {
  width: 7.5rem;
  height: 4.4rem;
  box-sizing: border-box;
  padding-top: 0.2rem;
  .result {
    margin: 0 auto;
    box-sizing: border-box;
    &.play {
      width: 4.87rem;
      height: 3.31rem;
      padding-top: 1.53rem;
      background: url(../assets/images/play2.png) no-repeat center top / contain;
      .btn_play {
        width: 1.3rem;
        height: 1.3rem;
        margin: 0 auto;
      }
    }
    &.succ {
      width: 4.87rem;
      height: 3.31rem;
      padding-top: 1.85rem;
      background: url(../assets/images/succ2.png) no-repeat center top / contain;
      .btn_get {
        width: 3.71rem;
        height: 0.6rem;
        margin: 0 auto;
      }
    }
    &.succ2 {
      width: 4.87rem;
      height: 3.31rem;
      padding-top: 1.85rem;
      background: url(../assets/images/succ2_2.png) no-repeat center top / contain;
      p {
        font-size: 0.45rem;
        text-align: center;
        color: #16adbd;
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .btn_get {
        width: 3.71rem;
        height: 0.6rem;
        margin: 0 auto;
      }
    }
    &.repeat {
      width: 4.87rem;
      height: 3rem;
      background: url(../assets/images/repeat2.png) no-repeat center top / contain;
      p {
        font-size: 0.45rem;
        text-align: center;
        color: #727171;
        padding-top: 0.4rem;
      }
    }
    &.sorry {
      width: 4.87rem;
      height: 1.72rem;
      background: url(../assets/images/sorry2.png) no-repeat center top / contain;
    }
    &.repeat2 {
      width: 4.87rem;
      height: 1.72rem;
      p {
        font-size: 0.45rem;
        text-align: center;
        color: #727171;
        padding-top: 0.6rem;
      }
    }
  }
}
</style>
